<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div style="position:absolute;left:0px;bottom:0px;width:auto;height:300px;display:flex;flex-direction: row;background-color:white;">
            <div style="height:100%;width:400px;">
                <el-table style="width:100%;height:100%;" :data="table_data" stripe border >
                    <el-table-column prop="一级类" label="分类"></el-table-column>
                    <el-table-column  prop="avg" label="平均值"></el-table-column>
                </el-table>
            </div>
            <div ref="chart_column" style="height:100%;width:1100px;"></div>
        </div>
    </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import * as echarts from 'echarts'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import * as queryClass from '@arcgis/core/rest/query'
import Query from '@arcgis/core/rest/support/Query'
import FeatureLayer from'@arcgis/core/layers/FeatureLayer'
import * as 天地图 from '../天地图'
var map,view,query,handle,featureLayer
var x_data=[];
var y_data=[]
const table_data=ref([])//表格双向绑定变量
const chart_column=ref()//图表DOM节点
var chart_column_app,chart_option
var queryURL="https://ws8575.club/web/rest/services/Hosted/北京_AOI/FeatureServer/0"
onMounted(()=>{
    query=new Query({//创建查询参数对象
        outStatistics:[//outStatisticFieldName疑似不能为中文
            {onStatisticField:"area",outStatisticFieldName:"avg",statisticType:`avg`},
        ],
        groupByFieldsForStatistics : [ "一级类" ]//设置分组字段,分组字段也会出现在输出表中
    })
    queryClass.executeQueryJSON(queryURL,query).then((featureSet)=>{//这里的操作是异步进行的,所以要等待查询执行完成后在创建表格
        var attributes=featureSet.features.map((item)=>{//获取查询返回的要素属性的集合
            return item.attributes
        })
        table_data.value=attributes.map((item)=>{//形式为[{一级类:"XXX",avg:xxx.xx},{一级类:"XXX",avg:xxx.xx}]
            for(let key in item){//遍历属性集合,将avg成员对应的数值保留两位小数,然后将处理完成的属性集合传递给表格的双向绑定变量
                if(key==="avg"){
                    item[key]=Number(item[key].toFixed(2))
                }
            }
            return item
        })
        console.log(table_data.value[0].一级类)
        x_data=table_data.value.map((item)=>{//获取一级类字段的值的数组,作为数据表的x轴数据
            return item.一级类
        })
        y_data=table_data.value.map((item)=>{//获取平均值的数值的数组,作为数据表的y轴数据
            return item.avg
        })
    })
    chart_column_app = echarts.init(chart_column.value,'chalk')
    handle=setInterval(()=>{
        if(y_data[12]){
            chart_option={//创建表格配置对象
                backgroundColor: 'white',//背景颜色,代替了父元素style中的background-color属性
                title: { //配置标题组件
                    text: "各类别平均面积统计", //设置主标题
                    textStyle: { //设置主标题文字样式
                        color: 'red',
                    },
                    x: 'center',//x轴偏移,"center"表示横向居中
                    y: 15//表示标题距离顶部的距离
                },
                legend: { // 配置图例
                    top: 20, 
                    right:30,// 设置图例相对容器位置，top\bottom\left\right,正值向下偏移
                    data: [ // 设置图例内容
                        {
                            name: '平均面积'
                        }
                    ],
                },
                xAxis:{
                    name:"类别",
                    axisTick: { // 设置坐标轴刻度
                    inside: true, // 设置坐标轴刻度是否朝内,如果不设置默认朝外
                    },
                    data:x_data
                },
                yAxis:{
                    type: 'value',
                    name: '平均面积',
                    axisLine: { // 设置Y坐标轴轴线
                    show: true, // 设置坐标轴轴线是否显示,默认为false
                    },
                },
                series:[{
                    name: '平均面积',
                    type: 'bar', //设置指定显示为柱状图
                    data: y_data
                }]
            }
            chart_column_app.setOption(chart_option)
            clearInterval(handle)
        }
    },500)    
    featureLayer=new FeatureLayer({
        url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
        renderer:{
            type:"simple",
            symbol:{
            type:"simple-fill",
            color:[0,0,0,0.2],
            outline:{
                width:0
            }
            }
        },
        labelingInfo:{
            labelExpressionInfo: {
                expression:`$feature.name`,
            },
            minScale:10000
        }
    })
    map=new Map({
        basemap:{
        baseLayers:天地图.天地图矢量
        },
        layers:[featureLayer]
    })
    view=new MapView({
        map:map,
        container:"viewDiv",
        center:[120.4,36.1],
        zoom:12,
        constraints:{
            rotationEnabled:false,
            maxScale:2000
        }
    })
    view.ui.remove(["zoom","attribution"])
})
</script>
  
<style scoped>
#container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
}
</style>
  